<template>
  <div style="width: 100%;">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="关键词">
              <a-input placeholder="请输入显示名称、值或描述" v-model="queryParam.searchWord"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12">
            <a-form-item label="场景">
              <c-select d-type="sys_dict_optional_scenario" v-model="queryParam.optionalScenario" mode="multiple"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12">
            <a-form-item label="状态">
              <c-select d-type="sys_use_flag" v-model="queryParam.useFlag" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="">
              <a-button @click="search" type="primary">查询</a-button>
              <a-button @click="reset" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-page-operator-wrapper">
      <a-button type="primary" @click="$refs.addPanel.show()" ghost>新增</a-button>
      <a-popconfirm
        title="确定删除选中记录?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="batchDelete(selectedRowKeys)"
      >
        <a-button :disabled="selectedRowKeys.length === 0">删除</a-button>
      </a-popconfirm>
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="export-data" @click="exprotExcel">导出Excel</a-menu-item>
        </a-menu>
        <a-button>
          更多操作 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      rowKey="id"
      :row-selection="rowSelection">
      <template slot="optionalScenario" slot-scope="text">
        {{ text | getLabel('sys_dict_optional_scenario') }}
      </template>
      <template slot="useFlag" slot-scope="text">
        {{ text | getLabel('sys_use_flag') }}
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="$refs.addPanel.show(record)">编辑</a>
        <a-divider type="vertical"/>
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm
                placement="leftTop"
                :title="`确定删除「${record.label}」?`"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteRecord(record)"
              >
              <a href="javascript:;">删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>
    <dict-item-edit-panel ref="addPanel" @submit-success="handleSubmitSuccess"/>
  </div>
</template>

<script>
import { STable } from '@/components'
import DictItemEditPanel from './DictItemEditPanel'
import CSelect from '@/views/common/Select'
// 字典子项 panel
export default {
  name: 'DictItemPanel',
  components: { STable, DictItemEditPanel, CSelect },
  props: {
    dictCode: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {
    dictCode () {
      this.$refs.table.refresh(true)
    }
  },
  data () {
    return {
      queryParam: {},
      columns: [{
        title: '所属编码',
        dataIndex: 'dictCode',
        width: 140,
        ellipsis: true
      }, {
        title: '显示名称',
        dataIndex: 'label',
        width: 140,
        ellipsis: true
      }, {
        title: '值',
        dataIndex: 'value',
        width: 100,
        ellipsis: true
      }, {
        title: '排序',
        dataIndex: 'sortNum',
        width: 80,
        align: 'right'
      }, {
        title: '可选场景',
        dataIndex: 'optionalScenario',
        width: 160,
        ellipsis: true,
        scopedSlots: { customRender: 'optionalScenario' }
      }, {
        title: '可用状态',
        dataIndex: 'useFlag',
        width: 100,
        align: 'center',
        scopedSlots: { customRender: 'useFlag' }
      }, {
        title: '描述',
        dataIndex: 'description',
        ellipsis: true
      }, {
        title: '操作',
        dataIndex: 'action',
        width: 150,
        align: 'center',
        scopedSlots: { customRender: 'action' }
      }],
      loadData: parameter => {
        this.selectedRowKeys = []
        const params = Object.assign(parameter, this.queryParam)
        params.dictCodes = this.dictCode.join(',')
        return this.$http.get('/dict/item', {
          params: params
        }).then(res => {
          res.page.records.some(item => {
            if (item.optionalScenario) {
              item.optionalScenario = item.optionalScenario.split('、')
            }
          })
          return {
            data: res.page.records,
            pageSize: res.page.limit,
            pageNo: res.page.pageNo,
            totalCount: res.page.total
          }
        })
      },
      selectedRowKeys: [],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
        }
      },
      deleteLoading: false
    }
  },
  methods: {
    search () {
      this.$refs.table.refresh(true)
    },
    reset () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    deleteRecord (record) {
      this.fetchDelete([record.id])
    },
    batchDelete (ids) {
      if (this.deleteLoading) {
        return
      }
      this.deleteLoading = true
      this.fetchDelete(ids, sucess => {
        this.deleteLoading = false
      })
    },
    fetchDelete (ids, callback) {
      this.$http.delete('dict/item/' + ids.join(',')).then(res => {
        if (res.data) {
          this.$message.success('删除成功')
          this.$refs.table.refresh()
        } else {
          this.$message.error('删除失败')
        }
        if (callback) {
          callback.call(this, true)
        }
      }).catch(e => {
        if (callback) {
          callback.call(this, true)
        }
      })
    },
    exprotExcel () {},
    handleSubmitSuccess () {
      this.$refs.table.refresh()
    }
  }
}
</script>

<style scoped>

</style>
